<template>
  <div ref="divEl" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
import useEchart from "@/hook/useEchart";
import { onMounted, ref, watch } from "vue";

const props = defineProps({
  echartDatas: {
    type: Array,
    default: () => [],
  },
});

watch(
  () => props.echartDatas,
  (newValue) => {
    setupEchart(newValue);
  }
);

const divEl: any = ref(null);
let myChart: any = null;

onMounted(() => {
  setupEchart(props.echartDatas);
});

function setupEchart(echartDatas: any[] = []) {
  if (!myChart) {
    myChart = useEchart(divEl.value);
  }
  let options = getOption(echartDatas);
  myChart.setOption(options);
}

function getOption(echartDatas: any[] = []) {
  let option = {
    // 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
    grid: {
      // grid 组件离容器左侧的距离
      left: "5%",
      //   grid 组件离容器右侧的距离
      right: "1%",
      //   grid 组件离容器上侧的距离
      top: "20%",
      //   grid 组件离容器下侧的距离
      bottom: "15%",
      //   grid 区域是否包含坐标轴的刻度标签
      containLabel: true,
    },
    legend: {
      // 图例组件离容器右侧的距离
      right: "center",
      //   图例组件离容器下侧的距离
      bottom: "5%",
      //   图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
      itemGap: 20,
      //   图例标记的图形宽度
      itemWidth: 13,
      //   图例标记的图形高度
      itemHeigth: 12,
      textStyle: {
        color: "#64BCFF",
      },
      icon: "rect",
    },
    // 提示框组件
    tooltip: {
      // 触发类型：'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；none 什么也不触发
      trigger: "axis",
      //   坐标轴指示器配置项
      axisPointer: {
        // 指示器类型
        type: "line",
        lineStyle: {
          // 线的颜色
          color: "#20FF89",
        },
      },
    },
    // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠
    xAxis: [
      {
        // 坐标轴类型
        type: "category",
        // 坐标轴轴线相关设置
        axisLine: {
          // 是否显示坐标轴轴线
          show: false,
        },
        // 坐标轴刻度标签的相关设置
        axisLabel: {
          color: "#64BCFF",
        },
        // 坐标轴在 grid 区域中的分隔线
        splitLine: {
          show: false,
        },
        // 在多个 x 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效
        axisTick: {
          show: false,
        },
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: "#64BCFF",
        },
      },
    ],
    series: [
      {
        name: echartDatas[0]?.name,
        type: "line",
        // 是否平滑曲线显示
        smooth: true,
        // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
        stack: "总量",
        // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高
        symbolSize: 5,
        // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
        showSymbol: false,
        itemStyle: {
          color: "#20FF89",
          lineStyle: {
            color: "#20FF89",
            width: 2,
          },
        },
        // 区域填充样式。设置后显示成区域面积图
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#20FF89",
              },
              {
                offset: 1,
                color: "rgba(255, 255, 255, 0)",
              },
            ],
          },
        },
        data: echartDatas[0]?.data,
      },
      {
        name: echartDatas[1]?.name,
        type: "line",
        smooth: true,
        stack: "总量",
        symbolSize: 5,
        showSymbol: false,
        itemStyle: {
          color: "#EA9502",
          lineStyle: {
            color: "#EA9502",
            width: 2,
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#EA9502",
              },
              {
                offset: 1,
                color: "rgba(255, 255, 255, 0)",
              },
            ],
          },
        },
        data: echartDatas[0]?.data,
      },
    ],
  };
  return option;
}
</script>

<style scoped></style>
